<template>
	<view class="human-map pt-2">
		<image class="map" src="@/static/images/home/human-bg.png" mode=""></image>
		<image class="map2" src="@/static/images/home/map2.png" mode=""></image>
		<view class="map-data flex-r s-b">
			<view class="left ml-1">
				<text>个性</text>
				<view class="flex-c mt-1">
					<view><text class="iconfont icon-taiyang" />46.5</view>
					<view><text class="iconfont icon-diqiu" />46.5</view>
					<view><text class="iconfont icon-beijiaodian" />46.5</view>
					<view><text class="iconfont icon-nanjiaodian" />46.5</view>
					<view><text class="iconfont icon-yueliang" />46.5</view>
					<view><text class="iconfont icon-shuixing" />46.5</view>
					<view><text class="iconfont icon-jinxing" />46.5</view>
					<view><text class="iconfont icon-huoxing" />46.5</view>
					<view><text class="iconfont icon-muxing" />46.5</view>
					<view><text class="iconfont icon-tuxing" />46.5</view>
					<view><text class="iconfont icon-tianwangxing" />46.5</view>
					<view><text class="iconfont icon-haiwangxing" />46.5</view>
					<view><text class="iconfont icon-mingwangxing" />46.5</view>
				</view>
			</view>
			<view class="center flex-r s-b">
				<view class="c-left">
					<text>icon 动机R接纳型</text>
					<view class="tags">
						<text>C2</text>
						<text>T5</text>
						<text>B3</text>
					</view>
					<text>icon 视野L全局的</text>
					<view class="tags">
						<text>C2</text>
						<text>T5</text>
						<text>B3</text>
					</view>
				</view>
				<view class="c-right">
					<text>icon 动机R接纳型</text>
					<view class="tags">
						<text>C2</text>
						<text>T5</text>
						<text>B3</text>
					</view>
					<text>icon 视野L全局的</text>
					<view class="tags">
						<text>C2</text>
						<text>T5</text>
						<text>B3</text>
					</view>
				</view>
			</view>
			<view class="right mr-1">
				<text>个性</text>
				<view class="flex-c mt-1">
					<view><text class="iconfont icon-taiyang" />46.5</view>
					<view><text class="iconfont icon-diqiu" />46.5</view>
					<view><text class="iconfont icon-beijiaodian" />46.5</view>
					<view><text class="iconfont icon-nanjiaodian" />46.5</view>
					<view><text class="iconfont icon-yueliang" />46.5</view>
					<view><text class="iconfont icon-shuixing" />46.5</view>
					<view><text class="iconfont icon-jinxing" />46.5</view>
					<view><text class="iconfont icon-huoxing" />46.5</view>
					<view><text class="iconfont icon-muxing" />46.5</view>
					<view><text class="iconfont icon-tuxing" />46.5</view>
					<view><text class="iconfont icon-tianwangxing" />46.5</view>
					<view><text class="iconfont icon-haiwangxing" />46.5</view>
					<view><text class="iconfont icon-mingwangxing" />46.5</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
</script>

<style lang="scss" scoped>
	.human-map {
		width: 100%;
		text-align: center;
		position: relative;
		padding-bottom: 40rpx;
		background: transparent;

		.map {
			width: 648rpx;
			height: 826rpx;
		}

		.map2 {
			width: 472rpx;
			height: 822rpx;
			position: absolute;
			top: 20rpx;
			left: 140rpx;
		}

		.map-data {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;

			.left,
			.right {
				background: #FFFFFF;
				border-radius: 8rpx;
				padding: 10rpx 14rpx;

				>text {
					font-size: 20rpx;
					color: #FFFFFF;
					background: #FC614B;
					padding: 8rpx 26rpx;
					border-radius: 4rpx;
				}

				view>text,
				view view {
					font-size: 20rpx;
					color: #FC614B;
					padding: 6rpx 0;

					.iconfont {
						font-size: 20rpx;
						color: #FC614B;
						margin-right: 10rpx;
					}
				}
			}

			.right {
				>text {
					background: #393939;
				}

				view>text,
				view view {
					color: #393939;

					.iconfont {
						color: #393939;
					}
				}
			}

			.center {
				flex: 1;
				padding: 10rpx;

				.c-left,
				.c-right {
					>text {
						font-size: 20rpx;
						color: #4D4D4D;
					}

					.tags {
						margin-top: 6rpx;
						margin-bottom: 10rpx;

						text {
							font-size: 20rpx;
							color: #FFFFFF;
							background: #FA4126;
							box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
							border-radius: 20rpx;
							padding: 6rpx;
							margin-left: 6rpx;
						}
					}
				}

				.c-right {
					>text {}

					.tags text {
						background: #4D4D4D;
					}
				}
			}
		}
	}
</style>